<template>

  <el-container>
    <el-header>
      <div class="header-content">
        <img  style="height: 150px;width: 150px" src="@/logo.png" alt="Logo" class="header-logo">
        <div>
          <img src="@/img.png" alt="Logo-text" style="height: 30px" class="header-logotext">
          <p STYLE="width: 1000px;margin-left: 10px;margin-top: 10px">NEUSOFT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SMART&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY</p>
        </div>
      </div>
    </el-header>

    <el-main>
      <div class="register-box">
        <h3>访客登记</h3>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

          <p style=" margin-bottom: 5px;margin-top: 20px">姓名</p>
          <el-input style="height: 40px;margin-top: 0px;"placeholder="请输入姓名" type="text" v-model="ruleForm.visitorName" autocomplete="off"></el-input>
          <div>
            <p style="margin-bottom: 5px;margin-top: 10px">邮箱</p>
            <el-input style="height: 40px;margin-top: 0px"placeholder="请输入邮箱" type="email" v-model="ruleForm.visitorEmail" autocomplete="off"></el-input>
          </div>
          <p style="margin-bottom: 5px;margin-top: 10px">手机号</p>
          <el-input style="height: 40px;margin-top: 0px"placeholder="请输入手机号" type="tel" v-model="ruleForm.visitorPhoneNumber" autocomplete="off"></el-input>

          <p style="margin-bottom: 5px;margin-top: 10px">访客地址</p>
          <el-input style="height: 40px;margin-top: 0px"placeholder="请输入地址"type="text" v-model="ruleForm.visitorAddress"  autocomplete="off"></el-input>

          <p style="margin-bottom: 5px;margin-top: 10px">访客身份证号</p>
          <el-input style="height: 40px;margin-top: 0px" placeholder="请输入身份证号"type="text" v-model="ruleForm.visitorIdNumber"  autocomplete="off"></el-input>
          <p style="margin-bottom: 5px;margin-top: 10px">来访事由</p>
          <el-input style="height: 40px;margin-top: 0px" placeholder="请输入事由"type="text" v-model="ruleForm.visitorReason" ></el-input>
          <el-form-item>
            <el-button style="margin-left: 0px;width: 300px;height: 30px;margin-top: 10px" type="primary" @click="submitForm('ruleForm')">提交登记</el-button>

          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>

</template>
<script setup>
import { ref, reactive, nextTick } from 'vue';
import * as loginAPI from '../api/register';
import * as vistorAdd from '../api/vistor';
import { useRoute, useRouter } from 'vue-router';

// 验证函数
const checkPhone = (rule, value, callback) => {
  const phoneRegex = /^1[3-9]\d{9}$/; // 简单的手机号验证正则表达式
  setTimeout(() => {
    if (!value) {
      callback(new Error('手机号不能为空'));
    } else if (!phoneRegex.test(value)) {
      callback(new Error('请输入正确的手机号'));
    } else {
      callback();
    }
  }, 1000);
};

// 表单数据
const ruleForm = reactive({
  visitorName: '',
  visitorEmail: '',
  visitorPhoneNumber: '',
  visitorAddress: '',
  visitorIdNumber: '',
  visitorReason: ''
});

// 表单验证规则
const rules = {
  visitorName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  visitorEmail: [
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  visitorPhoneNumber: [
    { validator: checkPhone, trigger: 'blur' }
  ],
  visitorAddress: [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ],
  visitorIdNumber: [
    { required: true, message: '请输入身份证号', trigger: 'blur' }
  ],
  visitorReason: [
    { required: true, message: '请输入事由', trigger: 'blur' }
  ]
};

// 路由
const router = useRouter();

// 提交表单
const submitForm = async () => {
  const valid = await new Promise(resolve => {
    nextTick(() => {
      this.$refs.ruleForm.validate(valid => resolve(valid));
    });
  });

  if (valid) {
    console.log("发送的数据对象:", ruleForm); // 直接打印对象查看
    try {
      const res = await vistorAdd.vistorAddAPI(ruleForm);
      if (res.data.code === 2000) {
        alert("登记成功");
        // 可能的后续操作，如跳转页面

      }
    } catch (error) {
      console.error("提交失败:", error);
    }
  } else {
    console.log("注册失败，表单验证未通过");
  }
};

// 跳转到登录页面
const toLoginPage = () => {
  router.push('/home'); // 假设'/home'是登录页面的路由路径
};
</script>
<style scoped>
.el-container {
  height: 100vh; /* 让容器高度充满整个视口 */
  display: flex;
  flex-direction: column; /* 改变主轴方向为垂直 */
}

.el-header {
  flex: 0 0 15%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 调整为两端对齐，以便在两侧放置元素 */
  padding: 0 20px; /* 添加内边距以防止内容贴近边缘 */
}

.el-footer {
  flex: 0 0 10%; /* footer占据10%高度，且不缩放 */
  line-height: 1; /* 同上 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.el-main {
  flex: 1; /* main占据剩余空间 */
  display: flex; /* 使main支持Flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 20px; /* 添加内边距 */
}

.register-box {
  width: 100%;
  max-height: 600px;
  max-width: 550px; /* 限制表单盒子的最大宽度 */
  border: 1px solid #000; /* 设置边框为浅绿色，宽度为1px */
  border-radius: 5px; /* 为盒子添加圆角效果 */
  padding: 30px; /* 为盒子内部添加内边距 */
}
.header-logo {
  float: left; /* 或使用display: inline-block; 并设置适当的margin-right来与其他元素保持间距 */
  width: 100px; /* 根据实际需要调整图片宽度 */
  height: auto; /* 保持图片的宽高比 */
  margin-right: 10px; /* 可选，根据需要调整与旁边文本的间距 */
}
.header-content {
  display: flex;
  align-items: center;
  position: absolute;
  left: 10%; /* 图片和标题距离左侧20% */
  width: 60%; /* 可根据实际情况调整，确保内容不会溢出 */
}
.login-link {
  position: absolute;
  right: 10%; /* 文字距离右侧5% */
  transform: translateY(-50%);
  color: #606266; /* 根据需要调整字体颜色 */
  cursor: pointer;
  top: auto; /* 移除之前的垂直居中设置 */
  margin-top: 10px; /* 添加顶部外边距，根据实际情况调整 */
}
.login-link:focus,
.login-link:hover {
  text-decoration: underline;
}
.footer-text {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 左对齐 */
  width: 100%;
  padding-left: 5%; /* 距离左侧10% */
}
.demo-ruleForm .el-form-item__content {
  line-height: 1; /* 增加行高以适应放大后的表单 */
}
.demo-ruleForm .el-input__inner {
  height: 48px; /* 假设原始高度为32px，这里调整为48px作为示例 */
  font-size: 16px; /* 增大字体大小 */
}
/* 如果有按钮调整，例如 */
.demo-ruleForm .el-button {
  height: 48px; /* 与输入框高度一致，保持协调 */
  font-size: 16px; /* 字体大小同步增大 */
}

</style>